<template>
	<view class="ques-option-item"  :class="[{ 'is-right' : isRight }, { 'is-error' : isError },{ 'is-active' : checked }]" @click="optionClick" >
		<view class="option-label"  >{{ option.label }}</view>
		<!-- <view class="f-w-b f-s-16">{{ option.label }}</view> -->
		<view class="ques-line" />
		<view class="f-w-b f-s-16 l-h-24">{{ option.content }}</view>
	</view>
</template>

<script setup>
	const emits = defineEmits([
		'optionClick'
	])


	const props = defineProps({
		option: {
			type: Object,
			default: {}
		},
		checked: {
			type: Boolean,
			default: false
		},
		isRight: {
			type: Boolean,
			default: false
		},
		isError: {
			type: Boolean,
			default: false
		}
	})
	
	const optionClick = () => {
		emits('optionClick', props.option)
	}
</script>

<style lang="scss">
	.ques-option-item {
		display: flex;
		align-items: center;
		background: #F9FAFC;
		padding: 40rpx;
		border-radius: 16rpx;
		margin: 32rpx 0;
		color: #000000;
		
		&.is-right {
			color: #04C684;
			background: #E5F8F2;
			.option-label{
				color: #FFFFFF;
				background: #04C684;
			}
		}
		
		&.is-error {
			color: #E94B49;
			background: #FDEDEE;
			.option-label{
				color: #FFFFFF;
				background: #E94B49;
			}
		}
		
		&.is-active {
			color: #165DFF;
			background: #EDF4FF;
			.option-label{
				color: #FFFFFF;
				background: #165DFF;
			}
		}

		.option-label {
			font-size: 16px;
			font-weight: bold;
			text-align: center;
			width: 30px;
			min-width: 30px;
			height: 30px;
			line-height: 30px;
			border-radius: 2px;
		}

		.ques-line {
			height: 32rpx;
			width: 2rpx;
			background: #C9CDD4;
			margin: 0 32rpx;
		}
	}
</style>